import { IconButton, Center } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from './ImageUploaderTriggerContext';
import { useContext, MouseEvent } from 'react';
import { BiSolidImageAdd } from 'react-icons/bi';

export default function ImageUploaderButton() {
  const { open } = useContext(ImageUploaderTriggerContext);
  const handleClickUpload = (e: MouseEvent) => {
    open && open();
    e.stopPropagation();
  };
  return (
    <Center flexGrow="1">
      <IconButton
        icon={<BiSolidImageAdd />}
        bg="transparent"
        _hover={{
          transform: 'scale(1.1)',
          bg: 'transparent',
        }}
        colorScheme="white"
        fontSize="5rem"
        aria-label="upload image"
        onClick={handleClickUpload}
      />
    </Center>
  );
}
